<template>
	<view class="pageWrap testResult" style="padding-top: 30rpx;padding-bottom: 30rpx;">
		<!-- <cus-nav title="评测结果"></cus-nav> -->
		<view class="section" style="margin-top: 0;" v-show="false">
			<view class="secTopic">答题结果</view>
			<view class="redar">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
					<!-- <view class="qiun-charts">
						<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" ></canvas>
					</view> -->
					<view class="qiun-charts">
						<canvas canvas-id="radarCapture" style="width: 680rpx;height: 454rpx;" id="radarCapture" class="charts"></canvas>
					</view>
				</view>
			</view>
		</view>
		<view class="section section3">
			<view class="secTopic">我的成绩  </view>
			<view class="f0">
				<view class="ib gradeCol">
					<view class="fpt28 cb8b">总题数</view>
					<text class="fpt40 c2c9 gr1 grx">{{resultData.questions.length}}</text>
				</view>
				<view class="ib gradeCol">
					<view class="fpt28 cb8b">答对</view>
					<text class="fpt40 c1ae gr2 grx">{{resultData.rightcount}}</text>
				</view>
				<view class="ib gradeCol">
					<view class="fpt28 cb8b">答错</view>
					<text class="fpt40 cff3 gr3 grx">{{resultData.wrongcount}}</text>
				</view>
				<view class="ib gradeCol">
					<view class="fpt28 cb8b">得分</view>
					<text class="fpt40 c2c9 gr4 grx">{{score}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="section fpt28 c373737" v-if="exp&&false">
			<view class="secTopic">综合评价</view>
			<view class="remark" style="padding:0 56rpx;">
				<view v-if="dan === 0">啊噢！你的成绩不太理想，需要通过更多的阅读积累来提升各个能力。九层之台，起于累土。万里之行，始于足下。从今天开始，和我们一起开启阅读之旅吧！</view>
				<view v-else>
					您的阅读能力<text v-if="false">未达到全国平均水平</text>
					<text v-if="dan === 2">超过50%的学生，表现优秀！</text>
					<text v-if="dan === 1">稍落后于其他的学生，继续加油！</text>
					<!---->
					你的{{outstanding(true)}}能力表现出色，{{remark}}
					但是，你的{{outstanding(false)}}能力略逊色于其他能力，需要通过更多的阅读积累来提升，和我们一起开启知阅之旅吧！
				</view>
			</view>
			<!-- <view class="fpt32 c2c9 recommend" v-if="nom.length>0">推荐图书</view>
			<view class="clear" v-if="nom.length>0">
				<view class="left center bookItem" v-for="(item, index) in nom" :key="index">
					<image class="book" :src="item.bookimg"></image>
					<view class="bookname ellipsis">{{item.bookname}}</view>
				</view>
			</view> -->
		</view>
		<view class="section section4" style="margin-bottom: 0;">
			<view class="secTopic">题目及答案</view>
			<view class="resultList">
				<view class="resultItem" v-for="(item, index) in resultData.questions" :key="index">
					<result-item :hideAnswer="hideAnswer" :question="item" :index="index"></result-item>
				</view>
				
			</view>
			
			<cos-btn text="确认" @sure="toTestIndex"></cos-btn>
		</view>
		<view class="section section5" v-if="false">
		<!-- <view class="section section5" v-if="books.length > 0"> -->
			<scroll-view :scroll-x="true" class="recommend">
				<view class="books">
					<view class="bookitem" v-for="(item, index) in books" :key="index" @click="toDetail(item.id)">
						<view class="bookface">
							<image :src="item.image"></image>
						</view>
						<view class="bookname">
							{{item.bookname}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="videoBox" v-if="showVideo && isdemon" @click="showVideo = false">
			<video src="http://test2.zhiyuext.com/h5/android/sanguo.mp4" @click.stop=""></video>
		</view> -->
	</view>
</template>

<script>
	import {queryProgress, queryTaskResult, queryTaskResultBK} from '../../common/api/task.js'
	import resultItem from '../../components/task4/result-item.vue'
	import cosBtn from '../../components/cos-btn4.vue'
	import {queryAbstract} from '../../common/api/book'
	import {shuffle2} from '../../common/js/util.js'
	import config from '../../common/js/config.js'
	import RadarCapture from '../../common/js/radar3.js'
	
	var canvaRadar = null
	export default {
		components:{
			resultItem,
			cosBtn
		},
		data() {
			return {
				debug: false,
				exp: true,
				isMakeUp:false,
				isself: false,
				taskid: "",
				taskInfo: '',
				resultData: {
					questions: []
				},
				capacityData: [0,0,0,0,0],
				books: [1,2,3,4,5]
			};
		},
		filters:{
			percentage(p){
				return Math.floor(p * 100) + '%'
			},
			getScore(item){
				if(item.makeupcount && item.makeupscore){
					return Math.floor(item.makeupscore)
				}else{
					return Math.floor(item.accuracy)
				}
			}
		},
		computed:{
			userid(){
				return uni.getStorageSync('keyid')
			},
			remark(){
				let target = 0
				let baseScore = this.capacityData[0]
				let res = ''
				this.capacityData.forEach((e,i)=>{
					if(e > baseScore){
						target = i
					}
				})
				switch(target){
					case 1:
						res = '能够辨认、识别、记忆、检索并找到书中的显性信息。'
						break
					case 2:
						res = '能够解释、举例、比较、推论、概括、说明、读出书中的言外之意。'
						break
					case 3:
						res = '能够分析、比较、想象并用语言文字表达自己的思考结果。'
						break
					case 4:
						res = '能够推理、辨别、检查、判断书中的内容。'
						break
					case 5:
						res = '具备较强的批判思维、创造性思维、求异思维。'
						break
				}
				return res
			},
			hideAnswer(){
				let res = false
				try{
					if(this.taskInfo && this.taskInfo.studenttest){
						res = this.taskInfo.studenttest.answerstatus === 3
					}
				}catch(err){
					console.log(err)
					console.log(res)
				}finally{
					return res
				}
			},
			nickname(){
				return this.$store.state.user.nickname
			},
			taskType(){
				if(!this.taskInfo){
					return ''
				}
				const res = this.taskInfo.tasktype === 0 ? '阅读评测' : '考试'
				return res
			},
			classDynamic(){
				if(!this.taskInfo.taskreceiver){
					return {
						completecount: 0,
						percent: 0,
						totalcount: 0
					}
				}
				return this.taskInfo.taskreceiver
			},
			score(){
				const grade = Math.floor(this.resultData.accuracy)
				if(isNaN(grade)){
					return 0
				}
				return grade
			},
			dan(){
				let grade = Math.floor(this.resultData.accuracy)
				if(isNaN(grade)){
					grade = 0
				}
				let res = 2
				if(grade >= 75){
					res = 2
				}else if(grade >= 60){
					res = 1
				}else{
					res = 0
				}
				return res
			}
			
		},
		async onLoad(option){
			if(this.debug){
				this.taskid = 'fd5fbb9a-1bef-483f-b750-7a3c0e007bf3'
				let token = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IkY2QzIzQzVFRTc1M0ZGRjNFMjg4NTE4ODY4NzgwRDQwN0ZBNUIzQ0RSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjlzSThYdWRUX19QaWlGR0lhSGdOUUgtbHM4MCJ9.eyJuYmYiOjE2NjgwNzA0ODYsImV4cCI6MTY2ODA3NDA4NiwiaXNzIjoiaHR0cDovLzE5Mi4xNjguMC40OjgwMjMiLCJjbGllbnRfaWQiOiJEZXZpY2VDbGllbnQiLCJqdGkiOiJGQ0I0RTg3RTMyMjQ5MDZBNzk0QzVENjQ1MDM2RUY3MiIsImlhdCI6MTY2ODA3MDQ4Niwic2NvcGUiOlsiZGV2aWNlLnNjb3BlIl19.hmFAMeR9OFa7RKKPwNV9TCt6u301VBJoNEs-SHzT6wWphiwRmg6KO68X3FBkil37gyJVlaZrROd-new6QSFRSZsNXZiGrOuEFsyaI3L-cy4itDT7ZA_bNbTc2ykRktqUU0hyXrzwp04GJHCdIFKTrnYx7yxnAKzTzjemzNwvbYUbo5i1ACGThPmhTlUqUL1axcLckMZObHj8BHZAXZaKCwZCHKAbewz9-pVHV5yyFPOMT4Z_hSoINt1cs5gS30belhSFY3xKm8OkL5RVm-HvQqRk32g6VmUwyxi_nXkq90ysXW_Q0NIcR4Au-xMcMYolX-V2YDS9wzKWW2V-kh9JDg'
				this.$store.commit('setToken', token)
			}
			if(option.exp){
				this.exp = true
			}
			if(option.taskid){
				this.taskid = option.taskid
			}
			if(option.isMakeUp){
				this.isMakeUp = true
			}
			this.isself = option.isself || false
			let capacityscore = uni.getStorageSync('capacityscore') || [0,0,0,0,0]
			capacityscore.forEach(e=>{
				this.capacityData[e.code - 1] += e.score
			})
			// this.drawRadar()
			this.getResult()
			if(!this.debug){
				this.getRecommend()
			}
		},
		mounted(){
			// this.drawRadar()
		},
		onShow(){
			this.setTitle('答题结果')
		},
		touchHandler(){
			console.log("防止滚动")
			return
		},
		methods:{
			outstanding(positive){
				let target = 0
				let baseScore = this.capacityData[0]
				let res = '检索'
				this.capacityData.forEach((e,i)=>{
					if(positive && e > baseScore){
						target = i
					}else if(!positive && e <= baseScore){
						target = i
					}
				})
				switch(target){
					case 1:
						res = '检索'
						break
					case 2:
						res = '运用'
						break
					case 3:
						res = '创新'
						break
					case 4:
						res = '评鉴'
						break
					case 5:
						res = '理解'
						break
				}
				return res
			},
			async getRecommend(){
				const params = {
					keyword: '',
					pageindex: 1,
					pagesize: 40,
					eBookType: 0,
				}
				const res = await queryAbstract(params)
				let bookPool = res.data || []
				this.books = shuffle2(bookPool).slice(0, 10).map(e=>{
					if(!e.imagefileid){
						e.image = '/static/img/book/bookface.png'
					}else{
						let url = config.DEBUG ? 'https://zhiyue.insyte.cn' : config.url
						e.image = `${url}/FileApi/File/Download?fileid=${e.imagefileid}`
					}
					return e
				})
			},
			toDetail(id){
				uni.navigateTo({
					url: `/pages/book/bookDetail?bookid=${id}`
				})
			},
			touchHandler(){
				console.log("防止滚动")
				return
			},
			
			async getResult(){
				let res
				if(this.isdemon){
					let myresult = uni.getStorageSync('myresult')
					console.log('结果列表')
					console.log(myresult)
					res = {"book":{"id":"079d62f6-f353-434c-9ab5-28723e267baa","bookname":"三国演义","isbn":"9787020008728","image":"https://www.zhiyuext.com/Content/FileUpload/Picture/Book/2ce41b45b1ce4234a59a0cf06dbe90b7.jpg","author":null,"abstract":"《三国演义》描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。","publishingcompany":"人民文学出版社","publishingcompanyaddress":"北京","publishtime":"1973","booktype":null,"words":717000,"createdtime":"2019-04-10T10:08:38.82","hasque":false},"tasktitle":"三国演义","rightcount":8.0,"wrongcount":2.0,"misscount":0.0,"accuracy":85.0,"begintime":"2021-04-19T14:46:36.998411","lasttime":"2021-04-19T15:09:30.286561","remainingtime":null,"paragraphs":null,"questions":[{"keyid":null,"type":1,"title":"是谁三让徐州给刘备？","paragraphid":null,"paragraph":null,"setterid":null,"picture":null,"stems":[{"index":"A","content":"刘表"},{"index":"B","content":"陶谦"},{"index":"C","content":"曹操"},{"index":"D","content":"孙乾"}],"useranswers":"B","standardanswers":"B","isanswer":true,"difficulty":3.0,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":1,"capacity":"信息检索","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":1,"title":"关羽是何方人士？","paragraphid":null,"paragraph":null,"setterid":null,"picture":null,"stems":[{"index":"A","content":"涿郡"},{"index":"B","content":"解良"},{"index":"C","content":"谯郡"},{"index":"D","content":"南阳"}],"useranswers":"B","standardanswers":"B","isanswer":true,"difficulty":3.0,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":1,"capacity":"信息检索","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":1,"title":"是谁杀了关羽（）。","paragraphid":null,"paragraph":null,"setterid":null,"picture":null,"stems":[{"index":"A","content":"马忠"},{"index":"B","content":"孙权"},{"index":"C","content":"吕蒙"},{"index":"D","content":"陆逊"}],"useranswers":"B","standardanswers":"B","isanswer":true,"difficulty":4.0,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":1,"capacity":"信息检索","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":7,"title":"“赤壁之战”中，是关羽向曹操诈降","paragraphid":null,"paragraph":null,"setterid":null,"picture":null,"stems":[{"index":"A","content":"对"},{"index":"B","content":"错"}],"useranswers":"B","standardanswers":"B","isanswer":true,"difficulty":4.0,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":1,"capacity":"信息检索","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":1,"title":"诸葛亮借完东风后，谁去江边接他？","paragraphid":null,"paragraph":null,"setterid":null,"picture":null,"stems":[{"index":"A","content":"关羽"},{"index":"B","content":"张飞"},{"index":"C","content":"赵云"},{"index":"D","content":"刘备"}],"useranswers":"C","standardanswers":"C","isanswer":true,"difficulty":4.0,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":1,"capacity":"信息检索","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":1,"title":"下面“鸟之将死，其鸣也哀；人之将死，其言也善“是哪位先人说的？","paragraphid":null,"paragraph":null,"setterid":null,"picture":"","stems":[{"index":"A","content":"孟子"},{"index":"B","content":"老子"},{"index":"C","content":"孔子"},{"index":"D","content":"荀子"}],"useranswers":"C","standardanswers":"C","isanswer":true,"difficulty":0.5,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":2,"capacity":"信息应用","score":1},{"code":3,"capacity":"创新求异","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":1,"title":"下列词语不是成语的是：","paragraphid":null,"paragraph":null,"setterid":null,"picture":"","stems":[{"index":"A","content":"犬马之劳"},{"index":"B","content":"手足失措"},{"index":"C","content":"股肱羽翼"},{"index":"D","content":"言过其实"}],"useranswers":"C","standardanswers":"C","isanswer":true,"difficulty":0.6,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":2,"capacity":"信息应用","score":1},{"code":3,"capacity":"创新求异","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":2,"title":"短文讲述了刘备白帝城托孤，下面关于托孤的理由正确的有","paragraphid":null,"paragraph":null,"setterid":null,"picture":"","stems":[{"index":"A","content":"刘备在白帝城一病不起\n"},{"index":"B","content":"蜀国战略要地荆州的丢失\n"},{"index":"C","content":"诸葛亮的责任心特别强\n"},{"index":"D","content":"刘备的儿子刘禅是个庸碌无能的人\n"}],"useranswers":["A","C","D"],"standardanswers":["C","B","A"],"isanswer":true,"difficulty":0.6,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":2,"capacity":"信息应用","score":1},{"code":5,"capacity":"解释推论","score":1}],"right":false,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":2,"title":"下面对“臣等尽施犬马之劳，以报陛下知遇之恩也”中体现了诸葛亮的那些方面：","paragraphid":null,"paragraph":null,"setterid":null,"picture":"","stems":[{"index":"A","content":"诸葛亮鞠躬尽瘁\n"},{"index":"B","content":"诸葛亮知恩图报\n"},{"index":"C","content":"诸葛亮忠心报国\n"},{"index":"D","content":"诸葛亮昏庸无能\n"}],"useranswers":["A","B"],"standardanswers":["A","B"],"isanswer":true,"difficulty":0.5,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":2,"capacity":"信息应用","score":1},{"code":5,"capacity":"解释推论","score":1}],"right":true,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"},{"keyid":null,"type":9,"title":"为什么刘备要托孤给诸葛亮，对刘备有什么样的意义？\n","paragraphid":null,"paragraph":null,"setterid":null,"picture":"","stems":"","useranswers":"因为刘备战败后危在旦夕，刘禅年少难当治国大任且诸葛亮才能出众能够扛起托孤重任。","standardanswers":"白帝城托孤是刘备经历惨败后，痛定思痛，彻底摈弃个人私心，重拾早年情怀的高义之举。","isanswer":true,"difficulty":0.7,"limitedtime":null,"knowledge":null,"capacityscore":[{"code":2,"capacity":"信息应用","score":1},{"code":4,"capacity":"赏析评鉴","score":1}],"right":false,"similarityscore":0.0,"adoptcount":0,"quize":null,"accuracy":0.0,"createdtime":"0001-01-01T00:00:00"}],"code":0,"msg":"成功"}
					res.rightcount = myresult.rightcount
					res.wrongcount = myresult.wrongcount
					res.accuracy = myresult.accuracy
					res.questions = res.questions.sort((a,b)=>a.questiontype-b.questiontype)
					res.questions.forEach((e, ind)=>{
						
						e.right = myresult.result[ind].right
						e.useranswers = myresult.result[ind].answer
						console.log(e.questiontype)
						console.log(myresult.result[ind].questiontype)
					})
					console.log(res)
					this.resultData = res
				}else if(this.isMakeUp){
					res = await queryTaskResultBK({taskid: this.taskid * 1, quserid: this.userid})
					this.resultData = res || {}
				}else{
					// res = await queryTaskResult({taskid: this.taskid * 1, quserid: this.userid})
					res = uni.getStorageSync('testResult')
					this.resultData = res
					
				}
				this.resultData.questions = this.sortQuestion(this.resultData.questions)
			},
			sortQuestion(arr){
				arr = arr.map(e => {
					e.sortStamp = e.questiontype === 7 ? 3 : e.questiontype
					return e
				})
				return arr.sort((a, b)=> {
					return a.sortStamp - b.sortStamp
				})
			},
			toTestIndex(){
				uni.navigateTo({
					url: '/pages/book/index?token=' + this.$store.state.token
				})
			},
			drawRadar(){
				let data = this.capacityData
				let Radar={categories:[],series:[]}
				Radar.categories = ['检索', '运用', '创新', '评鉴', '理解']
				Radar.series = [{name: '评测',data: this.capacityData}]
				let max = this.capacityData.reduce((accumulate, cur)=>{
					let cal = cur > accumulate ? cur : accumulate
					return cal
				}, 1)
				Radar.max = max
				let radar = new RadarCapture('radarCapture', max)
			 	radar.render(data)
			}
		}
		
	}
</script>

<style lang="scss">
@import '../../common/style/public.css';
$color: #a97141;
.testResult{
	// background: #2C95F8;
	background: rgba(243,249,255,1);
	.section{
		position: relative;
		margin: 40rpx 30rpx;
		padding-top: 26rpx;
		padding-bottom: 40rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.secTopic{
			font-size: 40rpx;
			font-weight: bold;
			color: #3e3e3e;
			padding-left: 30rpx;
			position: relative;
			margin-bottom: 20rpx;
			// &:before{
			// 	content: '';
			// 	position: absolute;
			// 	top: 10rpx;
			// 	left: 20rpx;
			// 	border-radius: 8rpx;
			// 	// background: #2C95F8;
			// 	background-color: #2ca1ff;
			// 	width: 16rpx;
			// 	height: 40rpx;
			// }
		}
		.bookInfo{
			position: absolute;
			width: 140rpx;
			top: 70rpx;
			right: 20rpx;
			image{
				width: 140rpx;
				height: 180rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 10rpx;
				background: #e2e3e2;
			}
		}
	}
	.section1{
		.dl{
			font-size: 0;
			padding: 0 20rpx;
		}
		.dt{
			display: inline-block;
			font-size: 28rpx;
			color: #b8b8b8;
			width: 180rpx;
			vertical-align: top;
			margin-bottom: 10rpx;
		}
		.dd{
			width: 300rpx;
			display: inline-block;
			font-size: 28rpx;
			color: #b8b8b8;
			margin-bottom: 10rpx;
		}
	}
	.section2{
		.completeCol{
			display: inline-block;
			width: 33%;
			text-align: center;
			view{
				margin-bottom: 12rpx;
			}
		}
	}
	.section3{
		.score{
			margin-left: 30rpx;
			color: #b8b8b8;
		}
		.rank{
			position: absolute;
			top: 0;
			right: 26rpx;
			font-size: 28rpx;
			color: #373737;
			text{
				vertical-align: top;
			}
			image{
				margin-left: 20rpx;
				width: 13rpx;
				height: 23rpx;
			}
		}
		.gradeCol{
			width: 25%;
			text-align: center;
			text{
				display: inline-block;
				width: 68rpx;
				height: 68rpx;
				margin-top: 10px;
				line-height: 68rpx;
				text-align: center;
				// color: #ffffff;
				// color: $color;
				color: #bf6868;
				font-weight: bold;
				font-size: 48rpx;
				border-radius: 34rpx;
			}
			.gr1{
				background-color: #2ca1ff;
			}
			.gr2{
				background-color: #b3e162;
			}
			.gr3{
				background-color: #eb7178;
			}
			.gr4{
				width: 135rpx;
				background-color: #ffcc33;
			}
			.grx{
				background-color: transparent;
			}
			
		}
	}
	.section5{
		.recommend{
			.books{
				white-space: nowrap;
				.bookitem{
					width: 150rpx;
					margin: 0 20px;
					display: inline-block;
					.bookface{
						width: 150rpx;
						text-align: center;
						image{
							width: 111rpx;
							height: 153rpx;
						}
					}
					.bookname{
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
}
.resultItem{
	margin-top: 40rpx;
}
.videoBox{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 350rpx;
	padding-left: 25rpx;
	background-color: rgba(0,0,0,0.5);
	video{
		width: 700rpx;
		height: 525rpx;
	}
}
.qiun-charts {
	width: 690rpx;
	height: 460rpx;
	margin: 0 auto;
	background-color: #FFFFFF;
}

.charts {
	width: 690rpx;
	height: 460rpx;
	// background-color: #FFFFFF;
}
</style>
